<template>
<el-card class="news_card" >
  <template #header>
    <div class="card-header">
      <span>{{item.title}}</span>
    </div>
  </template>
  <div class="news_content">
    <div class="news_contain hvr-sweep-to-right" v-for="obj in item.lists" @click="showNews(obj.id)">
      <span>{{obj.title}}</span>
      <span>{{obj.time}}</span>
    </div>
  </div>
  <transition name="showNews">
    <template v-if="cardShow">
      <div class="content_contain" v-show="cardShow">
        <el-card style="width: 800px;height: 400px">
          <template #header>
            <div class="card-header">
              <span>{{selectNews.title}}</span>
              <span>{{selectNews.time}}</span>
              <el-button type="text" size="small" @click="cardShow=false">关闭</el-button>
            </div>
          </template>
          <div class="content">
            {{selectNews.message}}
          </div>
        </el-card>
      </div>
    </template>
  </transition>
</el-card>

</template>

<script>
export default {

  name: "NewsCard",
  watch:{
    showId(val,oldVal){
      this.$nextTick(()=>{
        this.cardShow = true
      })
    }
  },
  data(){
    return{
      selectNews:{
        id: 0,
        date: '',
        title: '',
        content:'',
      },
      cardShow: false,
      showId: 0,
    }
  },
  methods:{
    showNews(id){
      this.showId = id
      this.item.lists.forEach(value => {
        if (id===value.id){
          this.selectNews = value
        }
      })
      this.cardShow = !this.cardShow
    }
  },
  props:{
    item:{
      type:Object,
      default:null
    }
  }
}
</script>

<style scoped>
.card-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.content_contain{
  position: fixed;
  z-index: 1;
  margin: 0 auto;
  width: 800px;
  height: 400px;
  left: 20%;
  top: 20%;
}

.showNews-enter-active{
  animation: bounceInUp 1s;
}
.showNews-leave-active{
  animation: bounceOutDown 1s;
}
.news_content{
  margin: 10px auto 0 auto;
}
.news_contain{
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  width: 100%;
  height: 50px;
  border-bottom: 1px solid #000;

}
.news_contain span{
  font-size: 20px;
  font-weight: bolder;
  letter-spacing: 0.15em;
}
.news_card{
  width: 650px;
  height: 500px;
}
</style>